<template>
  <div class="container" v-infinite-scroll="load">
    <div class="info">
      <div class="left">
        <el-carousel height="600px">
          <el-carousel-item v-for="(item, index) in info.image" :key="index">
            <el-image style="width: 100%; height: 100%" :src="baseUrl + item" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right">
        <span class="title">{{ info.title }}</span>
        <span class="desc">{{ info.desc }}</span>
        <span class="price">￥{{ info.price }}</span>
        <div class="tags">
          <span>颜色：</span>
          <div class="tag">
            <el-tag
              @click="selColor = index"
              :effect="selColor == index ? 'dark' : 'plain'"
              v-for="(item, index) in info.sku_text"
              :key="index"
              >{{ item.color }}</el-tag
            >
          </div>
        </div>
        <div class="tags" v-show="info.sku_text[selColor]">
          <span>规格：</span>
          <div class="tag">
            <el-tag
              :effect="selSku == index ? 'dark' : 'plain'"
              v-for="(item, index) in info.sku_text[selColor]?.size"
              :key="index"
              >{{ item.value }}</el-tag
            >
          </div>
        </div>
        <div class="number">
          <span>数量：</span>
          <el-input-number v-model="num" :min="1" :max="10" />
        </div>
        <div class="btn">
          <el-button size="large" @click="orderAdd" type="primary" plain
            >立即购买</el-button
          >
        </div>
      </div>
    </div>
    <div class="introduce">
      <span class="title">商品介绍</span>
      <div class="content" v-html="info.content"></div>
    </div>
    <div class="comment">
      <div class="title">
        <span>评论</span>
        <span>（共{{ total }}条评论）</span>
      </div>
      <el-input
        v-model="comment"
        type="textarea"
        placeholder="说说你的看法吧"
        maxlength="300"
        :autosize="{ minRows: 3, maxRows: 6 }"
      />
      <div class="publish">
        <el-button size="small" @click="publishComment(0)" type="primary"
          >发表评论</el-button
        >
      </div>
      <div class="item" v-for="(item, index) in commentList" :key="index">
        <div class="user_info">
          <el-avatar :size="40" :src="baseUrl + item.user?.avatar" />
          <div class="right">
            <span>{{ item.user?.nickname }}</span>
            <span>{{ item.create_time }}</span>
          </div>
        </div>
        <div class="comment_info">
          <span>{{ item.content }}</span>
        </div>
        <div class="like">
          <el-icon
            @click="like(item, index)"
            :class="item.is_like ? 'is_like' : ''"
            size="18"
            ><Star
          /></el-icon>
        </div>
      </div>
    </div>
    <div class="address">
      <el-dialog v-model="addressShow" title="请选择地址" width="30%">
        <el-button
          @click="addNewAddress('新建地址')"
          style="margin-bottom: 20px"
          :icon="Plus"
          type="primary"
          >新建地址</el-button
        >
        <el-radio-group v-model="changeAddress">
          <el-radio
            :label="item.id"
            v-for="(item, index) in addressList"
            :key="index"
          >
            <div class="info">
              <div class="top">
                <div class="text">
                  <span>{{ item.name + " " + item.user.nickname }}</span>
                  <el-tag size="small" v-show="item.status == 1"
                    >默认地址</el-tag
                  >
                </div>
                <div class="icon">
                  <el-icon @click.stop="editAddress(item)">
                    <Edit />
                  </el-icon>

                  <el-popconfirm
                    @confirm="delAddress(item)"
                    title="确定删除地址?"
                  >
                    <template #reference>
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
              <div class="under">
                <span>{{
                  item.province + item.area + item.city + item.address
                }}</span>
              </div>
            </div>
          </el-radio>
        </el-radio-group>
        <div class="submit_btn">
          <el-button type="primary" @click="submit" plain>确定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog :title="title" v-model="editShow" width="30%">
      <div class="edit_dialog">
        <el-input v-model="editInfo.name" placeholder="请输入姓名" />
        <el-input v-model="editInfo.phone" placeholder="请输入手机号" />
        <el-cascader
          :props="props"
          v-model="editInfo.addressInfo"
          :options="options"
        />
        <el-input
          type="textarea"
          v-model="editInfo.address"
          placeholder="请输入详细地址"
        />
        <div class="switch">
          <span>是否为默认地址：</span>
          <el-switch v-model="editInfo.status" />
        </div>
        <div class="btns">
          <el-button @click="editShow = false">取消</el-button>
          <el-button type="primary" @click="submitEditAddress">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import options from "./json";
import { goodInfo } from "@/http/api";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import {
  goodOrderAdd,
  addressIndex,
  addressAdd,
  addressEdit,
  addressDel,
  goodCommentIndex,
  goodCommentAdd,
  goodLikeAdd,
  goodLikeDel,
} from "@/http/api";
import { Plus } from "@element-plus/icons-vue";
const baseUrl = import.meta.env.VITE_API_URL;
const route = useRoute();
const info = ref({
  sku_text: [],
});
const props = {
  value: "name",
  label: "name",
};

const num = ref(1);
const selColor = ref(0);
const selSku = ref(0);
const addressShow = ref(false);
const changeAddress = ref("");
const addressList = ref([]);
const editShow = ref(false);
const editInfo = ref({
  name: "",
  phone: "",
  addressInfo: [],
  address: "",
  status: false,
});

const title = ref("");

const comment = ref("");
const commentList = ref([]);
const total = ref(0);
const more = ref(false);
const page = ref(0);

onMounted(() => {
  getInfo();
  getCommentList();
});

const publishComment = async (e) => {
  const { code, data } = await goodCommentAdd({
    parent_id: e,
    good_id: route.query.id,
    content: comment.value,
  });
  if (code == 200) {
    ElMessage.success(e ? "回复成功" : "评论成功");
    comment.value = "";
    page.value = 1;
    commentList.value = [];
    more.value = true;
    getCommentList();
  }
};

const like = async (e, i) => {
  if (e.is_like) {
    const { code, data } = await goodLikeAdd({
      good_comment_id: e.id,
    });
    if (code == 200) {
      commentList.value[i].is_like = false;
    }
  } else {
    const { code, data } = await goodLikeDel({
      good_comment_id: e.id,
    });
    if (code == 200) {
      commentList.value[i].is_like = true;
    }
  }
};

const getCommentList = async () => {
  const { data } = await goodCommentIndex({
    good_id: route.query.id,
    page: page.value,
    limit: 10,
  });
  data.good_comment.data.length
    ? commentList.value.push(...data.good_comment.data)
    : (more.value = false);
};

const getAddress = async () => {
  const { data } = await addressIndex();
  addressList.value = data.address;
  const obj = data.address.filter((el) => el.status == "1");
  changeAddress.value = obj[0].id;
};

const getInfo = async () => {
  const { data } = await goodInfo({
    id: route.query.id,
  });
  info.value = data.good;
  info.value.image = info.value.image.split(",");
};

const submitEditAddress = async () => {
  if (title.value == "新建地址") {
    const { code, data } = await addressAdd({
      name: editInfo.value.name,
      phone: editInfo.value.phone,
      province: editInfo.value?.addressInfo[0],
      city: editInfo.value?.addressInfo[1],
      area: editInfo.value?.addressInfo[2],
      address: editInfo.value.address,
      status: editInfo.value.status ? "1" : "0",
    });
    if (code == 200) {
      editShow.value = false;
      getAddress();
    }
  } else {
    const { code, data } = await addressEdit({
      id: editInfo.value.id,
      name: editInfo.value.name,
      phone: editInfo.value.phone,
      province: editInfo.value?.addressInfo[0],
      city: editInfo.value?.addressInfo[1],
      area: editInfo.value?.addressInfo[2],
      address: editInfo.value.address,
      status: editInfo.value.status ? "1" : "0",
    });
    if (code == 200) {
      editShow.value = false;
      getAddress();
    }
  }
};

const editAddress = (e) => {
  title.value = "修改地址";
  editShow.value = true;
  editInfo.value = {
    id: e.id,
    name: e.name,
    phone: e.phone,
    addressInfo: [e.province, e.city, e.area],
    address: e.address,
    status: e.status == 1,
  };
  console.log(editInfo.value);
};

const delAddress = async (e) => {
  const { code, data } = await addressDel({
    id: e.id,
  });
  if (code == 200) {
    getAddress();
  }
};

const submit = async () => {
  const { code, data } = await goodOrderAdd({
    good_id: route.query.id,
    num: num.value,
    sku_id: info.value.sku_text[selColor.value]?.size[selSku.value].sku_id,
    address_id: changeAddress.value,
    reason: "",
  });
  if (code == 200) {
    addressShow.value = false;
    ElMessage.success("购买成功");
  }
};

const orderAdd = async () => {
  getAddress();
  addressShow.value = true;
};

const addNewAddress = (e) => {
  editShow.value = true;
  title.value = e;
};

const load = () => {
  if (more.value) {
    page.value++;
    getCommentList();
  }
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
